<!-- eslint-disable vue/valid-v-for -->
<template>
  <a-modal
    :title="pageType == 'edit' ? '编辑' : '新增'"
    v-model:visible="visible"
    unmount-on-close
    width="46vw"
    @cancel="close"
    :bodyStyle="{ 'padding-bottom': '0', 'max-height': 'calc(100vh - 210px)' }"
  >
    <a-descriptions
      title=""
      :align="{ label: 'right' }"
      :label-style="{ 'text-align': 'left', width: '0%' }"
      :value-style="{ 'text-align': 'left' }"
      v-if="pageType == 'edit'"
    >
      <a-descriptions-item label="设备SN/ID">{{ form.vehicleSn }}</a-descriptions-item>
      <a-descriptions-item label="设备CODE"> {{ form.vehicleCode }}</a-descriptions-item>
    </a-descriptions>
    <a-divider v-if="pageType == 'edit'" />
    <page-form :model="form" div="true" ref="formRef" layout="vertical" class="page-form">
      <page-form-row>
        <page-form-item
          field="vehicleFirm"
          label="设备供应商"
          size="1/2"
          :disabled="pageType == 'edit'"
          :rules="[{ required: true, message: '请选择', trigger: 'change' }]"
        >
          <a-select v-model="form.vehicleFirm" placeholder="请选择">
            <a-option v-for="item in carTboxVehicleDict.vehicleFirmEnums" :key="item.value" :value="item.value" :label="item.label" />
          </a-select>
        </page-form-item>
        <page-form-item
          field="vehicleSn"
          label="设备SN/ID"
          size="1/2"
          :rules="[{ required: true, message: '请输入', trigger: 'change' }]"
          v-if="pageType == 'create'"
        >
          <i-input placeholder="请输入" v-model="form.vehicleSn" />
        </page-form-item>
        <page-form-item
          field="vehicleCode"
          label="设备CODE"
          size="1/2"
          :rules="[{ required: true, message: '请输入', trigger: 'change' }]"
          v-if="pageType == 'create' && form.vehicleFirm == '智信通'"
        >
          <a-input placeholder="请输入" v-model="form.vehicleCode" />
        </page-form-item>
        <page-form-item field="licenseNo" label="车牌号" size="1/2">
          <remote-select
            v-model="form.licenseNo"
            :allow-clear="false"
            :initStr="form.licenseNo"
            type="car_licenseno_list"
            :params="{ bindTboxVehicle: 0 }"
            :updateAtScroll="true"
            popupContainer="body"
            @change="changeCarFn"
          />
        </page-form-item>
        <page-form-item field="vin" label="车架号" size="1/2">
          <a-input placeholder="请输入" v-model="form.vin" disabled />
        </page-form-item>
        <!-- 当设备供应商是好人好车的时候，如果不选车牌号，则车牌颜色也可以不选；但是如果选择了车牌号，则车牌颜色必须选择 -->
        <page-form-item
          field="licenseNoColor"
          label="车牌颜色"
          size="1/2"
          :rules="[{ required: form.vehicleFirm == '好人好车' && form.carId ? true : false, message: '请选择', trigger: 'change' }]"
        >
          <a-select v-model="form.licenseNoColor" placeholder="请选择">
            <a-option v-for="item in carTboxVehicleDict.licenseNoColorEnums" :key="item.value" :value="item.value" :label="item.label" />
          </a-select>
        </page-form-item>
      </page-form-row>
    </page-form>
    <template #footer>
      <a-button @click="close">关闭</a-button>
      <a-button type="primary" :loading="okLoading" @click="submitFn">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup name="CarboxInstallForm">
  import { ref } from 'vue'
  import { Modal, Message } from '@arco-design/web-vue'
  import { getCheckCarId } from '@/api/asset/carTbox'
  import { getCarTboxVehicleCreate, getCarTboxVehicleDetail, getCarTboxVehicleModify } from '@/api/asset/carTbox'
  import { usePageDict } from '@/hooks/useDict'
  const carTboxVehicleDict = usePageDict('carTboxVehicleDict')

  const visible = ref(false)
  const emits = defineEmits(['ok'])
  const form = ref({})

  // 编辑获取详情
  const getDetail = (id) => {
    getCarTboxVehicleDetail({ id: id }).then((res) => {
      form.value = res.result
    })
  }

  const formRef = ref()
  const okLoading = ref(false)
  const submitFn = () => {
    formRef.value.validate((error) => {
      if (!error) {
        okLoading.value = true
        if (form.value.carId) {
          getCheckCarId({ carId: form.value.carId }).then((res) => {
            if (res.result.existControl) {
              Modal.confirm({
                title: '存在未结束的控车单，坚持修改吗？',
                cancelText: '取消',
                okText: '确认',
                onOk: () => {
                  confirmFn()
                },
              })
            } else {
              confirmFn()
            }
          })
        } else {
          confirmFn()
        }
      }
    })
  }
  const confirmFn = () => {
    let fetch = getCarTboxVehicleModify
    if (pageType.value == 'create') {
      fetch = getCarTboxVehicleCreate
    }
    fetch({ ...form.value })
      .then(() => {
        Message.success('操作成功')
        emits('ok')
        close()
      })
      .finally(() => {
        okLoading.value = false
      })
  }
  const pageType = ref('')
  const show = (e) => {
    const id = e || ''
    if (id) {
      getDetail(id)
      pageType.value = 'edit'
    } else {
      pageType.value = 'create'
    }
    visible.value = true
  }

  const changeCarFn = (_, option = {}) => {
    console.log('option', option)
    form.value.carId = option.id
    form.value.vin = option.vin
    form.value.licenseNoColor = option.licenseNoColor
  }
  // 关闭
  const close = () => {
    visible.value = false
    form.value = {}
  }
  defineExpose({
    show,
  })
</script>

<style lang="less" scoped>
  .page-form {
    :deep(.arco-row) {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    :deep(.arco-col) {
      padding: 0 10px !important;
    }
  }
</style>
